<!-- 秒杀列表 -->
<template>
    <view class="page_box">
        <view class="content_box">
            <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
                <text class="padding-top padding-lr flex">金额：</text>
                <view class="titll padding">
                    <block v-for="(item, index) in data" :key="index">
                        <view
                            class="padding-xs  radius margin-bottom-sm flex justify-center align-center"
                            :class="[current == index ? 'selected' : '']"
                            style="width: 140rpx;"
                            @click="dianji(index)"
                        >
                            {{ item.num }}
                        </view>
                    </block>
                </view>
                <view class="titl padding-lr">
                    <text>备注：</text>
                    <input
                        type="text"
                        value=""
                        v-model="remark"
                        placeholder="填写备注"
                        placeholder-style="color:'#232323'"
                        placeholder-class="input"
                        class="margin-left"
                    />
                </view>

                <text class="padding-top padding-lr flex">支付方式：</text>
                <view class="titl padding-lr " @click="options(1)" :class="[optionsShow == 1 ? 'selected' : '']">
                    <image src="../../static/weix.png" mode="" style="width: 36rpx; height: 30rpx;"></image>
                    <text class="margin-left">微信支付</text>
                </view>
                <view class="titl padding-lr" @click="options(2)" :class="[optionsShow == 2 ? 'selected' : '']" style="display: none;">
                    <image src="../../static/qianbao.png" mode="" style="width: 36rpx; height: 30rpx;"></image>
                    <text class="margin-left">余额支付</text>
                </view>
                <view class="response flex align-center justify-center" style="height: 100rpx;">
                    <text style="color: #A0683F; outline-offset: 26rpx; ">
                        <text class="cuIcon-title"></text>
                        充值按10%返到分红额度上
                    </text>
                </view>
                <button class="cu-btn submit " @click="submit()">提交</button>

                <!-- 空白 -->
                <shopro-empty v-if="false" :emptyData="emptyData"></shopro-empty>
                <!-- 加载更多 -->
                <u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
                <!-- loading -->
                <shopro-load v-model="isLoading"></shopro-load>
            </scroll-view>
        </view>
        <view class="foot_box"></view>
        <!-- 自定义底部导航 -->
        <shopro-tabbar></shopro-tabbar>
        <!-- 关注弹窗 -->
        <shopro-float-btn></shopro-float-btn>
        <!-- 连续弹窗提醒 -->
        <shopro-notice-modal></shopro-notice-modal>
        <!-- 登录提示 -->
        <shopro-login-modal></shopro-login-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            emptyData: {
                img: this.$IMG_URL + '/imgs/empty/empty_goods.png',
                tip: '暂无秒杀商品，敬请期待~',
            },
            isLoading: false,
            loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            lastPage: 1,
            currentPage: 1,
            tabCurrent: 'ing',
            goodsList: [],
            loading: false,

            optionsShow: 1,
            address: '',
            amount: '', // 金额
            id: '', // 充值id
            remark: '', // 备注
            user_coupons_id: 1, //  优惠券ID
            data: [],
            current: 0, // 金额选择
        };
    },
    computed: {},
    onLoad() {
        this.getInfo();
        this.settingLst();
    },
    methods: {
        dianji(index) {
            this.current = index;
        },
        options(e) {
            this.optionsShow = e;
        },
        submit() {
            console.log('recharge_id :>> ', this.data[this.current].id);
            this.isLoading = true;
            let that = this;
            that.$api('topupOrdr', {
                recharge_id: this.data[this.current].id,
                remark: this.remark,
                type: 'recharge',
            }).then(res => {
                this.isLoading = false;
                this.prepayments(res.data.order_number);
                // res.data.order_number
            });
        },
        prepayments(order_sn) {
            let that = this;
            that.$api('prepayments', { order_sn, payment: 'wechat', attach: 'recharge' }).then(res => {
                console.log('res :>> ', res);
                this.isLoading = false;
                if (res.code) {
                    var data = res.data.pay_data;
                    console.log('data :>> ', data);
                    uni.requestPayment({
                        provider: data.provider,
                        timeStamp: data.timeStamp,
                        nonceStr: data.nonceStr,
                        package: data.package,
                        signType: data.signType,
                        paySign: data.paySign,
                        success: res => {
                            console.log('success:' + JSON.stringify(res));
                            this.$tools.toast('付款成功');
                            setTimeout(() => {
                                this.jump('pages/index/index');
                            }, 1000);
                        },
                        fail: err => {
                            console.log('fail:' + JSON.stringify(err));
                        },
                    });
                }
            });
        },

        getInfo() {
            let that = this;

            that.$api('storeInfo', {}).then(res => {
                console.log('res :>> ', res);
                this.address = res.data.name;
            });
        },
        settingLst() {
            let that = this;

            that.$api('settingLst', {}).then(res => {
                console.log('res 11:>> ', res);
                this.data = res.data;
            });
        },

        // 加载更多
        loadMore() {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.getGoodsList();
            }
        },
        // 秒杀列表
        getGoodsList() {
            let that = this;
            that.isLoading = false;
            that.loadStatus = 'loading';
            that.$api('storeInfo', {}).then(res => {
                if (res.code === 1) {
                    that.isLoading = false;
                    that.goodsList = [...that.goodsList, ...res.data.data];
                    that.lastPage = res.data.last_page;
                    if (that.currentPage < res.data.last_page) {
                        that.loadStatus = 'loadmore';
                    } else {
                        that.loadStatus = 'nomore';
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss">
.titll {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 706rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    // margin-bottom: ;
}
.titl {
    display: flex;
    align-items: center;
    width: 706rpx;
    height: 100rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 30rpx;

    text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #232323;
    }
    /deep/.input {
        font-size: 28rpx;
    }
    input {
        width: 60vw;
        color: #232323;
    }
}
.submit {
    display: flex;
    justify-content: center;
    width: 530rpx;
    height: 90rpx;
    background: #b39c72 !important;
    border-radius: 57rpx;
    margin: 0 auto;
    margin-top: 80rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
}
.selected {
    border: 3rpx solid #b39c72 !important;
    box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
}

.tab-box {
    .tab-item {
        flex: 1;
        line-height: 84rpx;
        text-align: center;
        background: #636363;
        color: #fff;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        position: relative;
        border-right: 1rpx solid #fff;
        .tab-triangle {
            position: absolute;
            z-index: 2;
            bottom: -14rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 28rpx;
            height: 28rpx;
            background: #e6b873;
            transform: rotate(45deg);
            transform-origin: center;
        }
    }

    .tab-active {
        background: #e6b873;
    }
}
.goods-item {
    margin-bottom: 2rpx;
    .cu-progress {
        width: 225rpx;
        height: 16rpx;
        .progress--color {
            background: #e6b873;
        }
    }
    .progress-text {
        color: #999999;
        font-size: 20rpx;
        margin-left: 25rpx;
    }
    .buy-btn {
        position: absolute;
        right: 0;
        bottom: -20rpx;
        width: 140rpx;
        height: 60rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;

        padding: 0;
    }
    .btn-end,
    .btn-nostart {
        background: rgba(238, 238, 238, 1);
        color: #999999;
    }
    .btn-ing {
        background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
        box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
        color: rgba(255, 255, 255, 1);
    }
}
</style>
